@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.language-picker-component {
	flex-direction: column;

	.language-picker-component__heading {
		margin: 0;

		@include break-small() {
			margin: 6px 12px 24px;
			flex-direction: row;
			align-items: center;
		}
	}

	.language-picker-component__title {
		font-size: 2rem;
	}

	.components-custom-select-control {
		width: 100%;
		height: 100%;

		.components-custom-select-control__button {
			// less the width of the search button plus the border
			width: calc(100% - 60px);
			height: 100%;
			font-size: 0.875rem;
		}

		.components-custom-select-control__menu {
			margin: 5px 0 0;

			.components-custom-select-control__item {
				font-size: 0.875rem;
			}
		}

		@include break-small() {
			display: none;
		}
	}

	.language-picker-component__search {
		position: relative;
		height: 34px;
		flex: 1 1 auto;
		margin-bottom: 12px;

		.search-component__input-fade {
			min-width: 0;
		}

		.search-component__input[type="search"] {
			width: 100%;
			font-size: 0.875rem;
			max-width: 100%;

			@include break-small() {
				padding-left: 12px;
			}
		}

		.search-component.is-open {
			border-radius: 2px;
			box-shadow: 0 0 0 1px var(--color-primary);

			.search-component__input {
				border-radius: 2px;
			}
		}

		&-desktop {
			display: none;

			@include break-small() {
				display: block;
				width: 240px;
			}
		}

		&-mobile {
			@include break-small() {
				display: none;
			}

			.search-component__icon-navigation {
				background-color: transparent;
			}

			.search-component:not(.is-open) {
				width: 30px;
				height: 30px;
				top: 1px;
				right: 26px;

				.search-component__icon-navigation {
					padding: 0;
				}

				.search-component__open-icon {
					width: 30px;
					height: 30px;
				}
			}
		}
	}

	.language-picker-component__language-group {
		justify-content: flex-start;
		width: 230px;
	}

	.language-picker-component__language-group > span {
		padding-top: 4px;
		padding-bottom: 4px;
		&.is-selected {
			padding-bottom: 2px;
			border-bottom: 2px solid var(--color-primary);
		}
	}

	.language-picker-component__labels {
		display: none;

		@include break-small() {
			display: flex;
		}

		flex-direction: row;
		flex-wrap: nowrap;
		font-family: $default-font;
		margin: 6px 12px;
		color: $gray-600;
		font-size: 0.875rem;
		text-transform: uppercase;
	}

	.language-picker-component__content {
		display: flex;
	}

	.language-picker-component__labels > div,
	.language-picker-component__category-filters {
		@include break-small() {
			width: 230px;
		}
	}

	.language-picker-component__category-filters {
		display: none;

		@include break-small() {
			display: initial;
		}
	}

	$language_button_width: 165px;

	.language-picker-component__language-buttons {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		width: 100%;

		// Allow up to five columns of buttons.
		max-width: $language_button_width * 5;

		@include break-small() {
			width: initial;
		}
	}

	.language-picker-component__language-button {
		justify-content: flex-start;
		width: 100%;

		@include break-small() {
			width: $language_button_width;
		}
	}
}
